<route lang="yaml">
	meta:
	enabled: false
</route>

<script setup lang="ts">
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import memberApi from '@/api/zhitan/users.ts'

	// import Api from '@/api/modules/system/user'
	const props = defineProps<{
		// infoform : any
	}>()
	const emits = defineEmits(['changedata'])
	const tableData = ref([])
	const background = ref(true)
	const allids : any = ref([])
	const allcateData : any = ref([])
	const adminid : any = ref(null)

	// const value = ref(true)
	const total : any = ref(0)
	const paging : any = ref({
		page: 1,
		limit: 10,
		status: 1
	})

	const { pagination } = usePagination()
	pagination.value.size = 20
	pagination.value.sizes = [20, 50, 100]

	onMounted(() => {
		// if (props.infoform) {
		// 	if (props.infoform.adminInfo && props.infoform.adminInfo.applet_user_id) {
		// 		allids.value.push(props.infoform.adminInfo.applet_user_id.id)
		// 		adminid.value = props.infoform.adminInfo.applet_user_id.id
		// 	}
		// 	if (props.infoform.staffList && props.infoform.staffList.length > 0) {
		// 		props.infoform.staffList.forEach((item : any) => {
		// 			allids.value.push(item.applet_user_id.id)
		// 		})
		// 	}
		// }
		getList()

	})
	function getList() {
		memberApi.AppletUser_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				tableData.value = res.data
				total.value = res.count
			}

		})
	}
	function changeSelect(e : any) {
		emits('changedata', e)
	}

	// 分页
	function sizeChange(val : any) {
		console.log(val, '分页')
		paging.value.limit = val
		getList()
	}
	// 分页
	function handleCurrentChange(val : any) {
		paging.value.page = val
		getList()
	}
</script>

<template>
	<el-dialog title="选择用户" width="950px" size="small" :close-on-click-modal="false" append-to-body destroy-on-close>
		<el-form :inline="true" class="demo-form-inline" size="default">
			<el-form-item label="用户昵称:">
				<el-input v-model="paging.nick_name" clearable placeholder="输入用户昵称" @clear="paging.nick_name = null" />
			</el-form-item>
			<el-form-item label="手机号:">
				<el-input v-model="paging.phone" clearable placeholder="输入手机号" @clear="paging.phone = null" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getList">
					<template #icon>
						<svg-icon name="ep:search" />
					</template>
					查询
				</el-button>
				<el-button @click="paging = {
				  page: 1,
				  limit: 10,
				  status:1
				}, getList()">
					重置
				</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" highlight-current-row border height="60vh">
			<el-table-column prop="id" label="ID" width="60" align="center" />
			<el-table-column prop="name" label="用户信息" min-width="200">
				<template #default="{ row:i }">
					<div class="aic flex">
						<div class="jcc aic flex">
							<image-preview :src="i.avatar?i.avatar:'1'" :width="34" :height="34"
								style="margin-right: 4px;" />
						</div>
						<div class="fdc ml-2 flex">
							<div>
								{{ i.nick_name || '未知昵称' }}
							</div>
							<div>
								{{ i.phone || '未授权手机号' }}
							</div>
						</div>
					</div>
				</template>
			</el-table-column>


			<el-table-column prop="create_time" label="添加时间" width="180" align="center">
				<template #default="{ row: i }">
					{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="80" align="center">
				<template #default="scope">
					<el-button :type="scope.row.ischange ? 'info' : 'primary'" size="small"
						:disabled="scope.row.ischange" @click.prevent="changeSelect(scope.row)">
						{{ scope.row.ischange ? '选择' : '选择' }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex items-center justify-center">
			<el-pagination v-model:current-page="paging.page" v-model:page-size="paging.limit" small
				:page-sizes="[10, 20, 50, 100]" :background="background" style="padding-top: 20px;"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</el-dialog>
</template>

<style scoped>
	.avatar {
		:deep(.el-image) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.image-slot) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.el-upload__tip) {
			display: none !important;
		}
	}
</style>